<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式绑定</title>
    <style>
        .active {
            text-decoration: underline;
        }

        .text-danger {
            font-weight: bold;
        }
    </style>

</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 对象语法 传 布尔值 -->
        <div v-bind:class="{active: isActive, 'text-danger': hasError}">Hello</div>
        <div v-bind:class="classObj">Vue.js</div>
        <!-- 数组语法 传 字符串 -->
        <div v-bind:class="['active', errorClass]">Hello Vue!</div>
        <!-- xx ？xx：xx 数组语法 三元表达式-->
        <div v-bind:class="[isActive ? 'active' : '',hasError?'text-danger':'']">Hello School!</div>
        <button @click="btnClick">button</button>
        
        <br>

        <!-- 对象语法 对象里面传字符串-->
        <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">Hello World!</div>
        <div v-bind:style="styleObj">Vue.js</div>

        <!-- 数组语法 数组里面传对象-->
        <div v-bind:style="[baseStyle, moreStyle]">Hello Vue.js</div>

    </div>

    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                msg: 'hello world',
                isActive: true,
                hasError: true,
                classObj: {
                    active: true,
                    'text-danger': true
                },
                activeClass: 'active',
                errorClass: 'text-danger',
                activeColor: 'red',
                fontSize: 30,
                styleObj: {
                    fontSize: '30px',
                    'text-decoration': 'underline'
                },
                baseStyle: {
                    border: '2px solid black'
                },
                moreStyle: {
                    width: '100px',
                    height: '100px'
                }

            },
            methods: {
                btnClick() {
                    this.isActive = !this.isActive;
                    this.hasError = !this.hasError;
                }
            }
        })
    </script>
</body>

</html>